<template>
	<view class="pickerContainer">
		<view class="pickBox" @tap="openPicker">
			<text class="placeholder" v-if="!selectLabel" :style="{fontSize: size }">{{ placeholder }}</text>
			<text class="valueText" v-else :style="{fontSize: size}">{{ selectLabel }}</text>
			<u-icon name="arrow-down" color="#007DF2" :size="size"></u-icon>

		</view>
		<u-overlay :show="showPicker">
			<view class="wrapper">
				<view class="block">
					<view class="head">
						<text class="cancel" @tap="closeOverlay">取消</text>
						<text class="title">{{ placeholder }}</text>
						<text class="confirm" @tap="confirm">确定</text>
					</view>
					<view class="inputBox" v-if="filter" @tap.stop>
						<input type="text" class="filterInput" placeholder="筛选" v-model="keyWord"
							placeholder-style="fontSize: 0.8rem" @input="filter">
						<u-icon name="close" class="close-icon" color="gray" v-if="keyWord" @tap="clear"></u-icon>
					</view>
					<view class="popup" ref="popup" @tap.stop>
						<picker-view :value="currentValue" @change="change" class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in optionList" :key="index">{{ item.label }}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>

			</view>
		</u-overlay>
	</view>
</template>
<script>
	export default {
		name: "customSelect",
		props: {
			placeholder: {
				type: String,
				default: '请选择',
				required: false
			},
			modelValue: {
				type: [String, Number],
				default: '',
				required: true
			},
			options: {
				type: Array,
				default: () => [],
				required: true
			},
			filter: {
				type: Boolean,
				default: true,
				required: false
			},
			size: {
				type: String,
				default: '20rpx',
				required: false
			},
			disabled: {
				type: Boolean,
				default: false,
				required: false
			}
		},
		data() {
			return {
				selectValue: '', // 选中值
				currentValue: [], // 当前选中值
				keyWord: '',
				selectOption: null,
				showPicker: false,
				optionList: []
			};
		},
		computed: {
			selectLabel() {
				if (!this.optionList || this.optionList.length === 0 || !this.selectValue) {
					return '';
				} else {
					const foundItem = this.optionList.find(item => item.value === this.selectValue);
					return foundItem ? foundItem.label : '';
				}
			},
			selectIndex() {
				if (!this.optionList || this.optionList.length === 0 || !this.selectValue) {
					return -1;
				} else {
					return this.optionList.findIndex(item => item.value === this.selectValue);
				}
			}
		},
		watch: {
			modelValue(newVal) {
				this.selectValue = newVal;
			},
			options(newVal) {
				this.optionList = newVal;
			},
			selectIndex(newVal) {
				this.currentValue = newVal === -1 ? [] : [newVal];
			}
		},
		methods: {
			filter() {
				this.optionList = this.options.filter(item => item.label.includes(this.keyWord));
			},
			clear() {
				this.keyWord = '';
				this.filter();
			},
			openPicker() {
				if (this.disabled) {
					return;
				}
				this.showPicker = true;
			},
			closeOverlay() {
				this.showPicker = false;
				this.currentValue = this.selectIndex === -1 ? [0] : [this.selectIndex];
			},
			change(item) {
				this.currentValue = item.detail.value;
			},
			confirm() {
				this.selectValue = this.optionList[this.currentValue[0] || 0].value;
				this.selectOption = this.optionList[this.currentValue[0] || 0];
				this.$emit('update:modelValue', this.selectValue);
				this.$emit('change', this.selectOption);
				this.showPicker = false;
			}
		},
		created() {
			this.selectValue = this.modelValue;
			this.optionList = this.options;
		}
	};
</script>
<style lang="scss" scoped>
	@import './index.scss';
</style>